<template>
  <!--角色新增/修改Modal-->
  <a-modal
    :title="isAdd? '角色新增':'角色修改'"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleModalOk"
    @cancel="handleModalCancel"
  >
    <a-form :form="form">
      <a-form-item
        label="隐藏的参数"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
        style="display: none"
      >
        <a-input v-decorator="['id',{initialValue: roleFmt.id}]"/>
      </a-form-item>
      <a-form-item label="角色名称" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input
          v-decorator="[
            `name`,
            {
              initialValue: roleFmt.name,
              rules: [
                {
                  required: true,
                  message: '请输入角色名称'
                },
                {
                  validator: roleNameValidator
                }
              ]
            }
          ]"
          placeholder="请输入角色名称"
          :allowClear="true"
        />
      </a-form-item>
      <a-form-item label="角色编号" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-input
          v-decorator="[
            `code`,
            {
              initialValue: roleFmt.code,
              rules: [
                {
                  required: true,
                  message: '请输入唯一编码'
                },
                {
                  validator: roleCodeValidator
                }
              ]
            }
          ]"
          placeholder="请输入唯一编码，角色编号"
          :allowClear="true"
        />
      </a-form-item>
      <a-form-item
        label="角色状态"
        :label-col="labelCol"
        :wrapper-col="wrapperCol">
        <a-select
          v-decorator="[`state`,{initialValue: roleFmt.state}]"
          placeholder="Please select a country"
        >
          <a-select-option value="1">
            启用
          </a-select-option>
          <a-select-option value="0">
            禁用
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="备注" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-textarea
          v-decorator="[
            'remark',
            { initialValue: roleFmt.remark }
          ]"
        />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import api from '../system'
import { emptyObject } from '@/utils/samsUtil'

// 角色新增/修改Modal
export default {
  name: 'RoleModalModify',
  data () {
    return {
      isAdd: true,
      visible: false,
      confirmLoading: false,
      width: 800,
      form: this.$form.createForm(this),
      labelCol: { span: 5 },
      wrapperCol: { span: 12 },
      role: {}
    }
  },
  computed: {
    roleFmt () {
      let { role } = this
      role = role || {}
      const fmt = {
        ...role,
        state: role.state === 0 ? '0' : '1'
      }
      return fmt
    }
  },
  methods: {
    // Modal show
    showModal (param = {}) {
      this.restForm()
      this.isAdd = emptyObject(param)
      this.role = param
      this.visible = true
    },
    // Modal hide
    hideModal () {
      this.visible = false
    },
    // Modal 确定按钮--保存
    handleModalOk () {
      this.form.validateFields((error, values) => {
        if (error === null) {
          let url = api.role.add
          if (!this.isAdd) {
            url = api.role.update
          }
          this.axios.post(url, values)
            .then((response) => {
              if (response.code === 200) {
                this.$message.success('保存成功')
                this.$emit('refresh')
                this.hideModal()
              } else {
                this.$message.error('保存失败：' + response.message)
              }
            })
            .catch((error) => {
              this.$message.error('保存异常：' + error)
            })
        } else {
          this.$message.error('提交异常，请检查是否有参数未校验成功')
        }
      })
    },
    // Modal 取消按钮
    handleModalCancel () {
      this.hideModal()
    },
    // Form 表单数据初始化方法 还原
    restForm () {
      this.form.resetFields()
    },
    // 校验-角色名称校验
    roleNameValidator (rule, value, callback) {
      if (emptyObject(value)) {
        callback()
        return
      }
      this.axios.post(api.role.roleNameUnique,
        { id: this.form.getFieldValue('id'), name: value })
        .then((response) => {
          if (response.code === 200) {
            callback()
          } else {
            // eslint-disable-next-line
            callback('该角色名称已存在')
          }
        })
    },
    // 校验-角色code校验
    roleCodeValidator (rule, value, callback) {
      if (emptyObject(value)) {
        callback()
        return
      }
      this.axios.post(api.role.roleCodeUnique,
        { id: this.form.getFieldValue('id'), code: value })
        .then((response) => {
          if (response.code === 200) {
            callback()
          } else {
            // eslint-disable-next-line
            callback('该角色code已存在')
          }
        })
    }
  }
}
</script>
